<template lang='pug'>
  .page
    .clearfix.mr-20.font-18
      .search-form
        Row.mb-15(type="flex" justify="start")
          Col.pr-20(span="6")
            span.label-txt.w80 默认：
            Input(placeholder="请输入")
          Col.pr-20(span="6")
            span.label-txt.w80 默认：
            Input(placeholder="请输入")
          Col.pr-20(span="6")
            span.label-txt.w80 默认：
            Input(placeholder="请输入")
          Col.pr-20(span="6")
            span.label-txt.w80 默认：
            Input(placeholder="请输入")

        Row.mb-15(type="flex" justify="start")
          Col.pr-20(span="12")
            span.label-txt.w80 长输入框：
            Input(placeholder="请输入")
          Col.pr-20(span="6")
            span.label-txt.w80 下拉框(单)：
            Select(v-model="selectModel" placeholder="请选择")
              Option(v-for="(item, index) of selectOps" :key="index" :value="item.id") {{item.name}}
          Col.pr-20(span="6")
            span.label-txt.w80 下拉框(多)：
            Select(v-model="selectModel2" placeholder="请选择" multiple)
              Option(v-for="(item, index) of selectOps2" :key="index" :value="item.id") {{item.name}}

        Row.mb-15(type="flex" justify="start")
          Col.pr-20(span="6")
            span.label-txt.w80 单选：
            RadioGroup(type="button" v-model="radioModel")
              Radio.m-b-5(:key="0" label="单选1")
              Radio.m-b-5(:key="1" label="单选2")
            span.text-error.font-12.line-h-32 {{radioModel}}
          Col.pr-20(span="12")
            span.label-txt.w80 多选：
            CheckboxGroup(v-model="checkboxModel")
              Checkbox.m-b-5(:key="0" label="多选1")
              Checkbox.m-b-5(:key="1" label="多选2")
              Checkbox.m-b-5(:key="2" label="多选3")
              Checkbox.m-b-5(:key="3" label="多选4")
            span.text-error.font-12.line-h-32(v-if="checkboxModel.length > 0") {{checkboxModel}}
          Col.pr-20(span="6")
            Button(type="info") 查询
      .mb-15
        Table.hasTitle-table(border :columns="thead" :data="tableData" :stripe="true" ref="demoTable")
          .clearfix.pr-24.pl-12(slot="header")
            Icon.pull-left.cursor-pointer.font-36.text-gray-ccc.line-h-70.mr-10(type="ios-add-circle-outline")
            .pull-left.line-h-70
              span.pr-5 合计:
              span.text-info.font-weight.mr-24.font-14 4人
              span.pr-5 在职:
              span.text-info.font-weight.mr-24.font-14 4人
              span.pr-5 离职:
              span.text-error.font-weight.mr-24.font-14 4人
            .pull-right
              Button.ml-10(type="info" @click="handleExportData") 导出
          template(slot-scope="{ row, index }" slot="action")
            | ￥12345

      .mb-15
        .clearfix
          span 表格导入
          Upload(action="" :before-upload="handleBeforeUpload" accept=".xls, .xlsx")
            Button(type="info" :loading="importExcel.uploadLoading" @click="handleUploadFile") 导入
        Table(:columns="importExcel.tableTitle" :data="importExcel.tableData" :loading="importExcel.tableLoading")
</template>

<script>
// import excel from '@/libs/excel'
import { Common } from '@/utils/common.js'
export default {
  data () {
    return {
      thead: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: 'aaa',
          width: 350,
          key: 'a',
          className: 'color-error-column'
        },
        {
          title: 'bbb',
          width: 350,
          key: 'b'
        },
        {
          title: 'ccc',
          width: 350,
          key: 'c',
          className: 'bg-gray-column'
        },
        {
          title: 'ddd',
          width: 350,
          key: 'd'
        },
        {
          title: 'eee',
          width: 150,
          key: 'action',
          slot: 'action',
          fixed: 'right'
        }
      ],
      tableData: [{ a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd' }],
      selectModel: '',
      selectOps: [
        { id: 0, name: '选项0' },
        { id: 1, name: '选项1' }
      ],
      selectModel2: '',
      selectOps2: [
        { id: 0, name: '选项0' },
        { id: 1, name: '选项1' }
      ],
      radioModel: '',
      checkboxModel: [],
      importExcel: {
        uploadLoading: false,
        progressPercent: 0,
        showProgress: false,
        showRemoveFile: false,
        file: null,
        tableData: [],
        tableTitle: [],
        tableLoading: false
      }
    }
  },

  mounted () {
  },

  methods: {
    handleExportData (ref, filename) {
      Common.handleExportData(this.$refs.demoTable, '表格名字')
    },

    handleUploadFile () {
      Common.initUpload(this.importExcel)
    },
    handleRemove () {
      Common.initUpload(this.importExcel)
      this.$Message.info('上传的文件已删除！')
    },
    handleBeforeUpload (file) {
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        Common.readFile(file, this.importExcel)
        this.importExcel.file = file
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      return false
    }
  }
}
</script>

<style>

</style>
